<template>
  <a-card :bordered="false" :loading="loading">
    <div class="w-full">
      <a-form :model="detailData" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-row :gutter="24">
          <a-col :span="24" :pull="2">
            <a-form-item label="攻略名称" name="name">
              <a-input v-model:value="detailData.name" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="封面" name="cover">
              <upload-image
                :image-str="detailData.cover"
                :component-props="{ maxCount: 1, disabled: true }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="作者" name="creator" :wrapper-col="{ span: 16 }">
              <a-input v-model:value="detailData.creator" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="24" :pull="2">
            <a-form-item label="轮播图片" name="images">
              <upload-image
                :image-str="detailData.images"
                :component-props="{ maxCount: 5, disabled: true }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="发布时间" name="publishTime">
              <a-date-picker
                :value="formatToDateTime(detailData.publishTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="24" :pull="1">
            <a-form-item
              label="介绍"
              name="introduce"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }"
            >
              <tinymce-editor
                v-model:value="detailData.introduce"
                placeholder="详细介绍"
                disabled
              ></tinymce-editor>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="创建时间" name="createTime">
              <a-date-picker
                :value="formatToDateTime(detailData.createTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="更新时间" name="updateTime">
              <a-date-picker
                :value="formatToDateTime(detailData.updateTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <!--          </a-row>-->
        <a-form-item :wrapper-col="{ span: 24 }">
          <div class="text-center">
            <a-button class="mr-50px" type="primary" @click="showModal(AuditStatusEnum.PASS)"
              >审核通过</a-button
            >
            <a-button class="mr-50px" type="primary" @click="showModal(AuditStatusEnum.NOT_PASS)"
              >审核不通过</a-button
            >
            <a-button @click="closeTab">返回</a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
    <!--    <label-modal-->
    <!--      :visible="labelModelForm.labelVisible"-->
    <!--      :active-label-list="labelModelForm.labelIdList"-->
    <!--      :label-type="labelModelForm.currentActiveKey"-->
    <!--      @cancel="handleCancel"-->
    <!--      @ok="handleConfirmCallBack"-->
    <!--    />-->
    <a-modal
      v-model:visible="confirmVisible"
      width="550px"
      title="审核通过"
      cancel-text="关闭窗口"
      ok-text="提交"
      @ok="submitAuditForm(AuditStatusEnum.PASS)"
      @cancel="handleCancelAuditPopup"
    >
      <a-form
        ref="passFormRef"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        :model="confirmForm"
      >
        <a-form-item label="审核意见" name="auditRemark">
          <a-textarea
            v-model:value="confirmForm.auditRemark"
            placeholder="可填写审核意见 (0-400字)"
            :rows="4"
            :maxlength="400"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      v-model:visible="turnDownVisible"
      width="550px"
      title="审核不通过"
      cancel-text="关闭窗口"
      ok-text="提交"
      @ok="submitAuditForm(AuditStatusEnum.NOT_PASS)"
      @cancel="handleCancelAuditPopup"
    >
      <a-form
        ref="passFormRef"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        :model="confirmForm"
      >
        <a-form-item
          label="审核意见"
          name="auditRemark"
          :rules="{ required: true, message: '请填写审核意见' }"
        >
          <a-textarea
            v-model:value="confirmForm.auditRemark"
            placeholder="审核不通过必须填写审核意见 (0-400字)"
            :rows="4"
            :maxlength="400"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script setup lang="tsx">
  import { message } from 'ant-design-vue';
  import DynamicForm from '@/components/dynamicForm/index.vue';
  import useRequestDetail from '@/hooks/useRequestDetail';
  import {
    travelPlanApi,
    createTravelPlan,
    updateTravelPlan,
    auditTravelPlan,
  } from '@/api/travelPlan';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { auditOptions, AuditStatusEnum } from '@/enums/auditEnum';

  defineOptions({
    name: 'travelPlanAudit',
  });

  const format = 'YYYY-MM-DD HH:mm';
  const router = useRouter();
  const route = useRoute();
  const tabsViewStore = useTabsViewStore();

  const labelModelForm = reactive({
    currentActiveKey: 0,
    labelVisible: false,
    labelIdList: [],
  });

  const auditModalForm = reactive({
    confirmVisible: false,
    turnDownVisible: false,
    confirmForm: {
      auditStatus: '',
      auditRemark: '',
    },
    turnDownForm: {
      auditRemark: '',
    },
  });
  const modelFormRef = ref(null);
  const turnDownFormRef = ref(null);
  const passFormRef = ref(null);
  const { confirmVisible, turnDownVisible, confirmForm, turnDownForm } = toRefs(auditModalForm);

  const { detailData, loading } = useRequestDetail({
    apiKey: travelPlanApi.travelPlanDetail,
    initParams: route?.query,
    isMount: !!Object.values(route?.query).length && !!Object.values(route?.query)[0],
  });

  const submitAuditForm = async (status: number) => {
    const confirmData = unref(confirmForm);
    const travelPlanId = Number(route?.query?.id);
    if (isNaN(travelPlanId)) {
      // 处理转换失败的情况
      throw new Error('ID is not a valid number');
    }
    const res = await auditTravelPlan({
      id: travelPlanId,
      auditStatus: status,
      auditRemark: confirmData.auditRemark,
    });
    if (res) {
      message.success(res?.msg);
      closeTab();
    }
  };

  const closeTab = () => {
    tabsViewStore.closeCurrentTab(route);
  };

  const handleCancel = () => {
    labelModelForm.currentActiveKey = 0;
    labelModelForm.labelVisible = false;
    labelModelForm.labelIdList = [];
  };

  const handleConfirmCallBack = (data: any) => {
    handleCancel();
  };

  // 关闭审核弹窗并清空数据
  const handleCancelAuditPopup = () => {
    const noPassRef: any = unref(turnDownFormRef);
    const passRef: any = unref(passFormRef);
    auditModalForm.confirmVisible = false;
    auditModalForm.turnDownVisible = false;
    auditModalForm.confirmForm = {
      auditStatus: '',
      auditRemark: '',
    };
    auditModalForm.turnDownForm = {
      auditRemark: '',
    };
    noPassRef && noPassRef?.resetFields();
    passRef && passRef?.resetFields();
  };

  // 根据key值打开审核弹窗
  const showModal = async (key: number) => {
    // const modelFormData: any = unref(modelFormRef);
    // modelFormData
    //   .validate()
    //   .then(() => {
    //     if (key === AuditStatusEnum.PASS) {
    //       auditModalForm.confirmVisible = true;
    //     } else if (key === AuditStatusEnum.NOT_PASS) {
    //       auditModalForm.turnDownVisible = true;
    //     }
    //   })
    //   .catch(() => {
    //     message.error('请检查必填项');
    //   });
    if (key === AuditStatusEnum.PASS) {
      auditModalForm.confirmVisible = true;
    } else if (key === AuditStatusEnum.NOT_PASS) {
      auditModalForm.turnDownVisible = true;
    }
  };
</script>

<style></style>
